<template>
  <view class="weekly-report-container">
    <!-- 顶部导航栏 -->
    <view class="report-header">
      <image class="back-button" @tap="goBack" src="/static/mine/right-black.png"> </image>
    </view>
    
    <!-- 周报概览 -->
    <view class="report-overview">
      <text class="overview-title">本周健康概览</text>
      <text class="date-range">{{ weekRange }}</text>
      
      <view class="overview-cards">
        <view class="overview-card">
          <text class="card-icon">💓</text>
          <text class="card-value">{{ healthData.heart_rate }}</text>
          <text class="card-label">心率(bpm)</text>
        </view>
        <view class="overview-card">
          <text class="card-icon">💧</text>
          <text class="card-value">{{ healthData.blood_oxygen }}%</text>
          <text class="card-label">血氧</text>
        </view>
        <view class="overview-card">
          <text class="card-icon">⚖️</text>
          <text class="card-value">{{ healthData.weigth }}</text>
          <text class="card-label">体重(KG)</text>
        </view>
      </view>
    </view>
    
    <!-- 周报内容区域 -->
    <view scroll-y class="report-content">
      <!-- 运动情况 -->
      <view class="report-section" style="--index: 1">
        <text class="report-section-title">运动情况</text>
        <view class="data-grid">
          <view class="data-cell">
            <text class="data-value">{{ formatNumber(healthData.step) }}</text>
            <text class="data-label">总步数</text>
          </view>
          <view class="data-cell">
            <text class="data-value">{{ formatNumber(healthData.calories) }}</text>
            <text class="data-label">总消耗卡路里</text>
          </view>
          <view class="data-cell">
            <text class="data-value">{{ healthData.sports_days }}</text>
            <text class="data-label">运动天数</text>
          </view>
        </view>
        
        <view class="weekly-chart">
          <view 
            v-for="(bar, i) in weeklyChartData" 
            :key="i"
            class="week-bar" 
            :style="{ height: bar + '%' }">
            <text class="bar-label">{{ dayLabels[i] }}</text>
          </view>
        </view>
      </view>
      
      <!-- 身体指标 -->
      <view class="report-section" style="--index: 2">
        <text class="report-section-title">身体指标</text>
        <view class="data-grid">
          <view class="data-cell">
            <text class="data-value">{{ healthData.weigth }}</text>
            <text class="data-label">平均体重(KG)</text>
          </view>
          <view class="data-cell">
            <text class="data-value">{{ healthData.BMI }}</text>
            <text class="data-label">BMI指数</text>
          </view>
          <view class="data-cell">
            <text class="data-value">{{ healthData.fat_rate }}%</text>
            <text class="data-label">体脂率</text>
          </view>
        </view>
        
        <view class="weight-trend">
          <text class="chart-title">体重趋势</text>
          <view class="weight-chart">
            <view class="chart-container">
              <view class="chart-area">
                <view class="mountain-chart">
                  <view class="mountain-area">
                    <view class="mountain-path" :style="{
                      clipPath: `polygon(
                        0 100%,
                        ${healthData.weightData.map((weight, index) => 
                          `${index * (100/6)}% ${100 - getPointPosition(weight)}%`
                        ).join(',')},
                        100% 100%
                      )`
                    }"></view>
                    <view v-for="(weight, index) in healthData.weightData" :key="index" 
                      class="point-wrapper"
                      :style="{ left: `${index * (100/6)}%` }">
                      <view class="point" :style="{ bottom: `${getPointPosition(weight)}%` }"></view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="date-labels">
                <text v-for="(day, index) in ['一','二','三','四','五','六','日']" :key="index">{{ day }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 睡眠分析 -->
      <view class="report-section" style="--index: 3">
        <text class="report-section-title">睡眠分析</text>
        <view class="data-grid">
          <view class="data-cell">
            <text class="data-value">{{ healthData.sleep_time }}</text>
            <text class="data-label">平均睡眠时长(小时)</text>
          </view>
          <view class="data-cell">
            <text class="data-value">{{ healthData.deep_time }}</text>
            <text class="data-label">深度睡眠(小时)</text>
          </view>
          <view class="data-cell">
            <text class="data-value">{{ healthData.sleep_score }}</text>
            <text class="data-label">睡眠质量评分</text>
          </view>
        </view>
        
        <view class="sleep-quality-chart">
          <text class="chart-title">睡眠质量</text>
          <view class="quality-bar">
            <view class="quality-indicator" :style="{ width: healthData.sleep_score + '%' }"></view>
          </view>
          <view class="quality-labels">
            <text>差</text>
            <text>良</text>
            <text>优</text>
          </view>
        </view>
        
        <view class="sleep-pattern">
          <text class="chart-title">睡眠模式</text>
          <view class="sleep-segments">
            <view class="sleep-segment light" :style="{ width: lightSleepPercent + '%' }"></view>
            <view class="sleep-segment deep" :style="{ width: deepSleepPercent + '%' }"></view>
          </view>
          <view class="pattern-legend">
            <view class="legend-item">
              <view class="legend-color light"></view>
              <text>浅睡</text>
            </view>
            <view class="legend-item">
              <view class="legend-color deep"></view>
              <text>深睡</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 生命体征 -->
      <view class="report-section" style="--index: 4">
        <text class="report-section-title">生命体征</text>
        <view class="data-grid">
          <view class="data-cell">
            <text class="data-value">{{ healthData.heart_rate }}</text>
            <text class="data-label">平均心率(bpm)</text>
          </view>
          <view class="data-cell">
            <text class="data-value">{{ healthData.blood_pressure }}</text>
            <text class="data-label">平均血压(mmHg)</text>
          </view>
          <view class="data-cell">
            <text class="data-value">{{ healthData.blood_oxygen }}%</text>
            <text class="data-label">平均血氧</text>
          </view>
        </view>
        
        <view class="vitals-chart">
          <text class="chart-title">压力指数</text>
          <view class="stress-meter">
            <view class="stress-bar">
              <view class="stress-indicator" :style="{ left: healthData.pressure + '%' }"></view>
            </view>
            <view class="stress-labels">
              <text>低</text>
              <text>中等</text>
              <text>高</text>
            </view>
          </view>
          <view class="stress-value">{{ pressureLevel }}</view>
        </view>
      </view>
      
      <!-- 健康分析 -->
      <view class="report-section" style="--index: 5">
        <text class="report-section-title">健康分析</text>
        <text class="health-analysis">{{ healthData.analysis }}</text>
      </view>
<!--       
      <view class="share-button">
        分享我的健康周报
      </view> -->
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 定义星期标签
const dayLabels = ['一', '二', '三', '四', '五', '六', '日'];

// 周报柱状图数据
const weeklyChartData = ref([60, 80, 40, 95, 70, 30, 50]);

// 健康数据
const healthData = ref({
  heart_rate: 78,
  blood_pressure: "120/80",
  blood_oxygen: 98,
  pressure: 65,
  step: 18500,
  calories: 2800,
  sports_days: 5,
  weigth: 88,
  BMI: 24.5,
  fat_rate: 18.3,
  sleep_time: 7.8,
  light_time: 5.5,
  deep_time: 2.3,
  sleep_score: 86,
  weightData:[87, 87.5, 88, 88.2, 88, 87.8, 87.5],
  analysis: "根据您的健康数据分析，您的整体健康状况良好。心率、血压和血氧维持在正常范围内，表明心血管健康状况稳定。您的运动量符合健康标准，有助于保持身体机能。BMI指数在正常范围，但接近过重边缘，建议适当控制饮食和增加运动量。睡眠质量整体良好，但深度睡眠略少，可能影响长期健康。"
});

// 当前周范围
const weekRange = ref('');

// 计算浅睡眠百分比
const lightSleepPercent = computed(() => {
  return ((healthData.value.light_time / healthData.value.sleep_time) * 100).toFixed(0);
});

// 计算深睡眠百分比
const deepSleepPercent = computed(() => {
  return ((healthData.value.deep_time / healthData.value.sleep_time) * 100).toFixed(0);
});

// 计算压力级别描述
const pressureLevel = computed(() => {
  const pressure = healthData.value.pressure;
  if (pressure < 30) {
    return `低 (${pressure})`;
  } else if (pressure < 70) {
    return `中等 (${pressure})`;
  } else {
    return `高 (${pressure})`;
  }
});

// 计算数据范围
const minWeight = computed(() => Math.min(...healthData.value.weightData));
const maxWeight = computed(() => Math.max(...healthData.value.weightData));
const weightRange = computed(() => maxWeight.value - minWeight.value);

// 计算点的位置（使用80%的高度范围，保留上下边距）
function getPointPosition(weight) {
  const range = maxWeight.value - minWeight.value;
  return ((weight - minWeight.value) / range) * 80 + 10; // 80%高度 + 10%底部边距
}

// 返回上一页
function goBack() {
  uni.navigateBack();
}

// 格式化数字，添加千位分隔符
function formatNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// 获取当前周日期范围
function getCurrentWeekRange() {
  const today = new Date();
  const dayOfWeek = today.getDay(); // 0是周日，1是周一，以此类推
  
  // 计算本周一的日期
  const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
  const monday = new Date(today);
  monday.setDate(today.getDate() + mondayOffset);
  
  // 计算本周日的日期
  const sunday = new Date(monday);
  sunday.setDate(monday.getDate() + 6);
  
  // 格式化日期
  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}年${month}月${day}日`;
  };
  
  return `${formatDate(monday)} - ${formatDate(sunday)}`;
}

// 页面加载时
onMounted(() => {
  // 更新周报日期
  weekRange.value = getCurrentWeekRange();
  
  // 在实际应用中，这里会从API获取健康数据
  // fetchHealthData();
});
</script>

<style>
.weekly-report-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
  padding:60rpx 20rpx;
}

.report-header {
  display: flex;
  align-items: center;
  padding: 20rpx 0rpx;
}

.back-button {
  margin-right: 30rpx;
  font-size: 48rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-title {
  font-size: 36rpx;
  font-weight: bold;
}

.report-overview {
  background: linear-gradient(135deg, #5a55ff, #aa55ff);
  color: white;
  border-radius: 30rpx;
  padding: 40rpx;
  margin:30rpx 0rpx ;
}

.overview-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.date-range {
  display: block;
  margin-bottom: 30rpx;
}

/* 概览卡片样式 */
.overview-cards {
  display: flex;
  justify-content: space-between;
  margin-top: 15rpx;
}

.overview-card {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 20rpx;
  padding: 24rpx;
  width: 31%;
  text-align: center;
}

.card-icon {
  font-size: 40rpx;
  margin-bottom: 16rpx;
  display: block;
}

.card-value {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.card-label {
  font-size: 24rpx;
  opacity: 0.8;
  display: block;
}

.report-content {
  flex: 1;
}

.report-section {
  background: white;
  border-radius: 30rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
  margin-bottom: 30rpx;
  animation: fadeIn 0.5s forwards;
  animation-delay: calc(var(--index) * 0.1s);
  opacity: 0;
  transform: translateY(20rpx);
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.report-section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
  display: block;
}

/* 网格数据布局 */
.data-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
}

.data-cell {
  width: 31%;
  margin-bottom: 20rpx;
  text-align: center;
  background-color: #f8f9fa;
  border-radius: 20rpx;
  padding: 20rpx;
}

.data-cell .data-value {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #5a55ff;
  display: block;
}

.data-cell .data-label {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.weekly-chart {
  height: 300rpx;
  margin-top: 30rpx;
  background-color: #f5f7fa;
  border-radius: 20rpx;
  display: flex;
  align-items: flex-end;
  padding: 20rpx;
  position: relative;
}

.week-bar {
  flex: 1;
  background-color: #5a55ff;
  margin: 0 4rpx;
  border-radius: 20rpx 20rpx 0 0;
  position: relative;
  transition: height 0.5s;
}

.bar-label {
  position: absolute;
  bottom: -50rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24rpx;
  color: #666;
}

.chart-title {
  font-size: 28rpx;
  color: #444;
  margin-bottom: 20rpx;
  display: block;
}

/* 体重趋势图表 */
.weight-trend {
  margin-top: 40rpx;
  padding: 30rpx;
  background-color: #f8f9fa;
  border-radius: 20rpx;
}

.weight-chart {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin: 20rpx 0;
}

.chart-container {
  height: 240rpx;
  position: relative;
}

.chart-area {
  height: 200rpx;
  position: relative;
  margin-bottom: 20rpx;
}

.mountain-chart {
  width: 100%;
  height: 100%;
  position: relative;
}

.mountain-area {
  width: 100%;
  height: 100%;
  position: relative;
}

.mountain-path {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #4B96FF 0%, rgba(75, 150, 255, 0.1) 100%);
}

.point-wrapper {
  position: absolute;
  width: 0;
  height: 100%;
  z-index: 1;
}

.point {
  position: absolute;
  width: 12rpx;
  height: 12rpx;
  background-color: #4B96FF;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  box-shadow: 0 0 8rpx rgba(75, 150, 255, 0.3);
}

.date-labels {
  display: flex;
  justify-content: space-between;
}

.date-labels text {
  flex: 1;
  text-align: center;
  font-size: 24rpx;
  color: #999;
}

/* 睡眠质量图表 */
.sleep-quality-chart {
  margin-top: 40rpx;
  padding: 30rpx;
  background-color: #f8f9fa;
  border-radius: 20rpx;
}

.quality-bar {
  height: 20rpx;
  background-color: #e0e0e0;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 10rpx;
}

.quality-indicator {
  height: 100%;
  background: linear-gradient(to right, #ff6b6b, #feca57, #1dd1a1);
  border-radius: 10rpx;
}

.quality-labels {
  display: flex;
  justify-content: space-between;
}

.quality-labels text {
  font-size: 24rpx;
  color: #666;
}

/* 睡眠模式图表 */
.sleep-pattern {
  margin-top: 40rpx;
  padding: 30rpx;
  background-color: #f8f9fa;
  border-radius: 20rpx;
}

.sleep-segments {
  display: flex;
  height: 60rpx;
  width: 100%;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.sleep-segment {
  height: 100%;
}

.sleep-segment.light {
  background-color: #a68aff;
}

.sleep-segment.deep {
  background-color: #5a55ff;
}

.pattern-legend {
  display: flex;
  margin-top: 20rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}

.legend-color {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
  border-radius: 4rpx;
}

.legend-color.light {
  background-color: #a68aff;
}

.legend-color.deep {
  background-color: #5a55ff;
}

/* 生命体征图表 */
.vitals-chart {
  margin-top: 40rpx;
  padding: 30rpx;
  background-color: #f8f9fa;
  border-radius: 20rpx;
}

.stress-meter {
  margin-bottom: 20rpx;
}

.stress-bar {
  height: 12rpx;
  background: linear-gradient(to right, #1dd1a1, #feca57, #ff6b6b);
  border-radius: 6rpx;
  position: relative;
  margin-bottom: 10rpx;
}

.stress-indicator {
  position: absolute;
  top: -10rpx;
  width: 32rpx;
  height: 32rpx;
  background-color: white;
  border: 4rpx solid #5a55ff;
  border-radius: 50%;
  transform: translateX(-50%);
}

.stress-labels {
  display: flex;
  justify-content: space-between;
}

.stress-labels text {
  font-size: 24rpx;
  color: #666;
}

.stress-value {
  text-align: center;
  font-weight: bold;
  color: #5a55ff;
  margin-top: 20rpx;
}

/* 健康分析 */
.health-analysis {
  line-height: 1.6;
  color: #666;
}

.share-button {
  background: linear-gradient(135deg, #5a55ff, #aa55ff);
  color: white;
  border-radius: 30rpx;
  padding: 30rpx;
  text-align: center;
  margin-bottom: 60rpx;
  box-shadow: 0 8rpx 24rpx rgba(90, 85, 255, 0.2);
}
</style> 